<!--
 * @Date: 2021-11-10 11:23:23
 * @LastEditors: 邓春宜
 * @Desc: 
 * @LastEditTime: 2021-12-30 17:55:31
 * @FilePath: \web-ems\src\component\board\text\TextStyle1.vue
-->
<template>
  <div
    class="box"
    :style="[
      {
        width: width + 'px',
        height: height + 'px',
        paddingTop: height * 0.2 + 'px',
        paddingLeft: width * 0.1 + 'px',
      },
    ]"
  >
    <p :style="titleStyle"><slot name="icon"></slot>{{title}}</p>
    <p>
       <span class="font2" :style="valueStyle"> {{value}}</span
      ><span class="font3" :style="unitStyle">{{unit}}</span>
    </p>
  </div>
</template>

<script>
import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
export default {
  props: {
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 160,
    },
     title: {
      type: String,
      default: '标题',
    },
     value: {
      type: String,
      default: '1234567.89',
    },
     unit: {
      type: String,
      default: 'kg',
    },
    titleStyle: {
      type: Object,
      default: {
        color: "#fff",
        fontSize: "20px",
      },
    },
    valueStyle: {
      type: Object,
      default: {
        color: "#58C8FF",
        fontSize: "50px",
      },
    },
    unitStyle: {
      type: Object,
      default: {
        color: "#fff",
        fontSize: "20px",
      },
    },
  },
  computed: {},
  setup(props) {
    const state = {
      name: 111,
    };
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="css" scoped>
.box {
  background: url("@/assets/image/border2.png") no-repeat center;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.box p { line-height: 1.2; text-align: left;}

.font2 {
  width: auto;
  font-family: Digital-7;
  text-align: center;
  list-style: none;
  text-orientation: upright;
  text-shadow: 5px 5px 20px rgb(3, 255, 129,0.5);
 

}
.font3 {
    padding-left: 10px;
}
</style> 